﻿<#include "module/macro.ftl">
<@head title="${blog_title!}"/>
<#include "module/sidebar.ftl">
<!-- ===========================
    =====>> Inner Page Hero <<===== -->
<div class="inner-page-hero-area bg-com jarallax">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="inner-page-hero-text">
                    <div class="inner-page-title">产品展示</div>
                    <ul class="inner-page-u">
                        <li>主页</li>
                        <li>产品展示</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- =====>> End Inner Page Hero <<===== 
    ================================= -->

<!-- ===========================
    =====>> Shop <<===== -->
<section class="shop-area pt-120 pb-120">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="shop-content">
                    <div class="row">
                        <#list posts.content as post>
                            <div class="col-xl-3 col-md-4 col-sm-6">
                                <div class="single-shop-product">
                                    <div class="single-product-image"><a href="${post.fullPath}"> <img
                                                    src="${post.thumbnail}" alt="product"> </a></div>
                                    <div class="single-product-text">
                                        <h3><a href="${post.fullPath}">${post.title}</a></h3>
                                        <div>${post.summary}</div>
                                        <div class="product-price">
                                            <h3>¥190</h3>
                                            <ul class="product-rating">
                                                <li><i class="fa fa-star"></i></li>
                                                <li><i class="fa fa-star"></i></li>
                                                <li><i class="fa fa-star"></i></li>
                                                <li><i class="fa fa-star"></i></li>
                                                <li><i class="fa fa-star-half-o"></i></li>
                                            </ul>
                                        </div>
                                        <#--                  <div class="product-button"> <a href="#">add to cart</a> <a href="#"><i class="fa fa-heart"></i></a> <a href="#"><i class="fa fa-sync-alt"></i></a> </div>-->
                                    </div>
                                </div>
                            </div>
                        </#list>

                    </div>
                    <#if posts.totalPages gt 0>
                        <@paginationTag method="shop" page="${posts.number}" total="${posts.totalPages}" display="3">

                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="pagination_box">
                                        <ul class="pagination">
                                            <#if pagination.hasPrev>
                                                <li><a href="${pagination.prevPageFullPath!}"><i
                                                                class="fa fa-angle-left"></i></a></li>
                                            </#if>
                                            <#list pagination.rainbowPages as number>
                                                <#if number.isCurrent>
                                                    <li class="active"><a href="${number.fullPath!}">${number.page!}</a>
                                                    </li>
                                                <#else>
                                                    <li><a href="${number.fullPath!}">${number.page!}</a></li>
                                                </#if>
                                            </#list>
                                            <#if pagination.hasNext>
                                                <li><a href="${pagination.nextPageFullPath!}"><i
                                                                class="fa fa-angle-right"></i></a></li>
                                            </#if>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </@paginationTag>
                    </#if>


                </div>
            </div>
        </div>
    </div>
</section>
<!-- =====>> End Shop <<===== 
    =========================== -->
<@footer></@footer>